<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回到顶部</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            -webkit-user-select: none;
        }

        html, body {
            width: 100%;
            height: 1000%;
            background: lightskyblue;
            background: -webkit-linear-gradient(top, lightskyblue,
            lightblue, lightcoral, lightcyan, lightgoldenrodyellow,
            lightgreen, lightpink, lightsalmon, lightseagreen,
            teal);
        }

        a {
            text-decoration: none;
            color: #000000;
        }

        a:hover, a:active, a:target, a:visited {
            text-decoration: none;
            color: #000000;
        }

        #go_link {
            display: none;
            position: fixed;
            bottom: 150px;
            right: 100px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            background: orange;
            text-align: center;
            border-radius: 25px;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

        #go_link:hover {
            opacity: 1;
            filter: alpha(opacity=100);
        }
    </style>
</head>
<body>
<a href="javascript:;" id="go_link">GO</a>

</body>
</html>
<script>
    var goLink = document.getElementById('go_link');

    window.onscroll = show_go;

    function show_go() {
        var curTop = document.documentElement.scrollTop || document.body.scrollTop,
            curHeight = document.documentElement.clientHeight || document.body.clientHeight;
        goLink.style.display = curTop > curHeight ? 'block' : 'none';
    }

    goLink.onclick = function () {
        window.onscroll = null;
        this.style.display = 'none';
        var duration = 100,
            interval = 10,
            target = document.documentElement.scrollTop || document.body.scrollTop,
            step = (target / duration) * interval,
            timer = window.setInterval(function () {
                var curTop = document.documentElement.scrollTop || document.body.scrollTop;
                if (curTop === 0) {
                    window.clearInterval(timer);
                    window.onscroll = show_go;
                    return;
                }
                console.log(timer);
                curTop -= step;
                document.documentElement.scrollTop = curTop;
                document.body.scrollTop = curTop;
            }, interval);
    };
</script>